<template>
    <div class="flex_center_between w_full choose-word transition" @click.prevent="playAudio">
        <div class="word_left" style="flex:1">
            <div class="word_lish" style="display:flex;align-items:center" :class="{ 'know-actived' : knowActived, 'no-know-actived' : noKnowActived }">
                <span class="fontIndex">{{ index + 1}} </span> 
                
                <div style="flex:1;display:flex;align-items:center;justify-content: space-between;margin-right:2.2rem">
                    {{ word.word }}
                    <span style="font-size:4rem" :style="{ opacity: Number(soundmark) }">{{ word.soundmark }}</span>
                    <span style="font-size:4rem" :style="{ opacity: Number(translationShow) }">{{ word.translation }}</span>
                </div>
            </div>
            <!-- <p class="word_text">{{ translationShow ? word.translation : '--' }}</p> -->
        </div>
        <div class="word_right flex_c_c cur">
            <span class="flex_c_c" v-if="!knowActived" @click.stop="chooseWordFun(1)"><word-right class="word-icon-color transition icon" /></span>
            <span class="flex_c_c" v-else @click.stop="chooseWordFun(1)"><cut-select class="icon" /></span>
            <span class="flex_c_c" v-if="!noKnowActived" @click.stop="chooseWordFun(2)"><word-error class="word-icon-color transition icon" style="margin-left: 2.4rem" /></span>
            <img src="@/assets/img/close_1.png" class="icon" v-else @click.stop="chooseWordFun(2)"/>
        </div>
    </div>
</template>
<script>
import { in_array } from '@/utils/index.js'
import wordRight from '../icon/right.vue'
import wordError from '../icon/error.vue'
import cutSelect from '../icon/right-select.vue'
export default {
    components: { wordRight, wordError, cutSelect },
    props: {
        word: {type: Object, default: {}},
        index: {type: Number, default: 0},
        soundmark: {type: Boolean, default: false},
        translationShow: {type: Boolean, default: false},
        knowChooseArr: {type: Array, default: []},
        noKnowChooseArr: {type: Array, default: []}
    },
    data() {
        return {
            in_array,
            knowActived: false,
            noKnowActived: false
        }
    },
    watch:{
        knowChooseArr(val,oldVal){
            this.knowChoose()
        },
        noKnowChooseArr(val,oldVal){
            this.noKnowChoose()
        }
    },
    mounted(){
        this.knowChoose()
        this.noKnowChoose()
    },
    methods:{
        knowChoose() {
            if (this.in_array(this.word.id, this.knowChooseArr)) {
                this.knowActived = true
            }else{
                this.knowActived = false
            }
        },
        noKnowChoose() {
            if (this.in_array(this.word.id, this.noKnowChooseArr)) {
                this.noKnowActived = true
            }else{
                this.noKnowActived = false
            }
        },
        chooseWordFun(type) {
            console.log(type)

            this.$emit('chooseWordFun', type, this.word)
        },
        playAudio() {
            this.$emit('playAudio', this.index, this.word)
        }
    }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.word-icon-color{color: #AAAAAA}
.know-actived{color: $background-green}
.no-know-actived{color: $background-red}
.icon{width: 4rem;height: 4rem}
.fontIndex{
    font-size: 3.2rem;
    margin-right: 2.2rem;
    color:#4E6E8A;
    &:hover{
        color: #fff;
    }
}
.font_work{margin-left: 2.2rem;}
.test_cont{
    width: 100%;
    height: 80%;
    margin: 4rem 0 0;
    overflow-y: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .word_cont{
        width: 47%;
        padding: 2.5rem;
        margin-bottom: 3.2rem;
        border-radius: 10px;
        background: #F7F8FA;
        &:hover .word-icon-color{color: #fff}
        &:hover .fontIndex{color: #fff}
        .word_left{
            .word_lish{
                color:#27369C;
                margin-bottom: 5px;
                font-size: 5rem;
            }
            .word_text{
                color: #626780;
                font-size: 3.2rem;
            }
        }
        .word_right{
            margin: auto 0;
            img{margin-left: 2.4rem}
        }
        &:hover{
            background: #F69B2C;
            .word_lish{
                color: #fff;
            }
            .word_text{
                color: #fff;
            }
        }
    }
    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:$background-theme;
    }
    &::-webkit-scrollbar-track { 
        background: #fff;
        border-radius: 5px;
    }
}
</style>
